<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <i class="fa fa-arrow-left back-icon" @click="goBack"></i>
            <p>用户登陆</p>
        </header>

        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">用户名：</div>
                <div class="content">
                    <input type="text" v-model="username" placeholder="用户名" />
                </div>
            </li>
            <li>
                <div class="title">密码：</div>
                <div class="content">
                    <input type="password" v-model="password" placeholder="密码" />
                </div>
            </li>
        </ul>

        <div class="button-login">
            <button @click="login">登陆</button>
        </div>
        <div class="button-register">
            <button @click="register">去注册</button>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
    name: 'UserLogin',
    components: { Footer },
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        login() {
            if (!this.username) {
                alert('用户名不为空')
                return
            }
            if (!this.password) {
                alert('密码不为空')
                return
            }
            this.$axios.post(
                '/auth',
                {
                    username: this.username,
                    password: this.password,
                    rememberMe: true
                }
            ).then(res => {
                const token = res.data.id_token
                if (!token) {
                    alert('用户名或密码错误')
                    return
                }
                sessionStorage.setItem('token', token);


                return this.$axios.get('/user')
                    .then(userResp => {
                        const user = userResp.data
                        if (user) {
                            sessionStorage.setItem('userId', user.id)
                            sessionStorage.setItem('userName', user.username)
                            sessionStorage.setItem('authorities', user.authorities)
                            if (user.authorities != null) {
                                sessionStorage.setItem('authorities', JSON.stringify(user.authorities))
                            }
                            console.debug('username=', user.username)
                        }
                        this.$router.go(-1)
                    }).catch(err => {
                        console.error('获取当前用户失败', err)
                        // 即便获取用户失败，token 已保存，可选择继续返回
                        this.$router.go(-1)
                    })
                this.$router.go(-1)
            }).catch(err => {
                console.error(err)
                alert('登录失败，请稍后再试！')
            })
        },
        register() {
            this.$router.push({ path: '/register' })
        }
    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.wrapper header .back-icon {
    position: absolute;
    left: 2vw;
    font-size: 4vw;
    color: #FFFFFF;
    cursor: pointer;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
    width: 100%;
}

.wrapper .form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}

.wrapper .form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

.wrapper .form-box li .content {
    flex: 1;
}

.wrapper .form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}

.wrapper .button-login,
.wrapper .button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;
    border: none;
    outline: none;
}

.wrapper .button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #EEE;
    border: solid 1px #DDD;
    border-radius: 4px;
    border: none;
    outline: none;
}
</style>
